<!DOCTYPE html>
<html>
  <head>
    <title>Video Overlay Tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map = L.map('map')

      L.tileLayer(
        'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
        {
          maxZoom: 18,
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          id: 'mapbox/satellite-v9',
          tileSize: 512,
          zoomOffset: -1
        }
      ).addTo(map)

      var videoUrls = [
          'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
          'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
        ],
        bounds = L.latLngBounds([[32, -130], [13, -100]])

      map.fitBounds(bounds)

      var overlay = L.videoOverlay(videoUrls, bounds, {
        opacity: 0.8,
        interactive: false,
        autoplay: false
      })
      map.addLayer(overlay)

      overlay.on('load', function () {
        var MyPauseControl = L.Control.extend({
          onAdd: function () {
            var button = L.DomUtil.create('button')
            button.innerHTML = '⏸'
            L.DomEvent.on(button, 'click', function () {
              overlay.getElement().pause()
            })
            return button
          }
        })
        var MyPlayControl = L.Control.extend({
          onAdd: function () {
            var button = L.DomUtil.create('button')
            button.innerHTML = '▶️'
            L.DomEvent.on(button, 'click', function () {
              overlay.getElement().play()
            })
            return button
          }
        })

        var pauseControl = new MyPauseControl().addTo(map)
        var playControl = new MyPlayControl().addTo(map)
      })
    </script>
  </body>
</html>
